import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import {Modal, ModalBody, ModalHeader, ModalFooter, Col, Row, Button} from "reactstrap";
import {
  getCost,
  getItem, getTypes,
  storeCost,
  storeItem,
  updateCost,
  updateItem
} from "../../../../../../redux/actions/eventDetail/tabCosts";
import {SET_COST_FIELD} from "../../../../../../redux/constants/eventDetail/tabCosts";
import {setFieldData} from "../../../../../../redux/actions/helper";
import Select from "react-select";

const TabCosts = props => {
  const {getCost, setFieldData, updateCost, storeCost, getItem, storeItem, updateItem, getTypes} = props
  const {params, reqParams, cost, types, eventId} = props
  const [nameValid, setNameValid] = useState(false)

  const Store = () => {
    if (cost.name) {
      if (params.isCost) {
        storeCost({...cost, type_id: cost.type.id}, eventId, reqParams)
      } else {
        storeItem({...cost, type_id: cost.type.id}, params.template_id, reqParams)
      }
    } else {
      setNameValid(true)
    }
  }

  const Update = () => {
    if (cost.name) {
      if (params.isCost) {
        updateCost(params.cost_id, {...cost, type_id: cost.type.id}, null, eventId, reqParams)
      } else {
        updateItem(params.cost_id, {...cost, type_id: cost.type.id}, null, params.template_id, reqParams)
      }
    } else {
      setNameValid(true)
    }
  }

  useEffect(() => {
    if (params.cost_id && params.isOpenModal) {
      if (params.isCost)
        getCost(params.cost_id, reqParams)
      else {
        getItem(params.cost_id, reqParams)
      }
    } else {
      setFieldData(SET_COST_FIELD, 'cost', {
        name: '',
        money: 0,
        confirmed: false,
        description: '',
        link: '',
        type: {data: types[0] || []}
      })
    }
    if (!params.isOpenModal) {
      setFieldData(SET_COST_FIELD, 'cost', {})
      setFieldData(SET_COST_FIELD, 'params', {...params, cost_id: null})
    }
    setNameValid(false)
  }, [params.isOpenModal]);

  return (
    <Modal
      isOpen={!!params.isOpenModal}
      toggle={() => setFieldData(SET_COST_FIELD, 'params', {...params, cost_id: null, isOpenModal: false})}
      className="modal-dialog-centered modal-lg"
    >
      <ModalHeader
        toggle={() => setFieldData(SET_COST_FIELD, 'params', {...params, cost_id: null, isOpenModal: false})}>
        {params.cost_id ? 'Редактирование' : 'Добавление'}
      </ModalHeader>
      <ModalBody className="modal-dialog-centered">
        <div className="w-100">
          <Row>
            <Col sm={6} className="align-self-center mt-1">
              <label htmlFor="name">Название</label>
              <input placeholder={'Введите название'}
                     id="name"
                     onChange={e => {
                       setNameValid(false)
                       setFieldData(SET_COST_FIELD, 'cost', {...cost, name: e.target.value})
                     }}
                     value={cost.name || ''}
                     className={`cost-item cost-item-input ${nameValid ? 'custom-input-invalid' : ''}`}/>
            </Col>
            <Col sm={6} className="align-self-center mt-1">
              <label htmlFor="link">Ссылка</label>
              <input placeholder={'Ссылка (подробнее)'}
                     id="link"
                     onChange={e => setFieldData(SET_COST_FIELD, 'cost', {...cost, link: e.target.value})}
                     value={cost.link || ''}
                     className={`cost-item cost-item-input`}/>
            </Col>
          </Row>
          <Row>
            <Col sm={6} className="mt-1">
            <textarea
              placeholder={'Описание для анонса'}
              onChange={e => setFieldData(SET_COST_FIELD, 'cost', {...cost, description: e.target.value})}
              value={cost.description || ''}
              className={`cost-item cost-item-input cost-item-description`}
            />
            </Col>
            <Col sm={6} className="mt-1">
              <Row>
                <Col xl={12} className="align-self-center">
                  <label htmlFor="money">Сумма</label>
                  <input placeholder={'Сумма'}
                         id="money"
                         onChange={e => setFieldData(SET_COST_FIELD, 'cost', {...cost, money: e.target.value})}
                         value={cost.money || ''}
                         type="number"
                         className={`cost-item cost-item-input`}/>
                </Col>
                <Col xl={12} className="mt-1">
                  <Select
                    className={`schedule-item schedule-input-select`}
                    classNamePrefix="dark_select"
                    value={cost.type && {value: cost.type.id, label: cost.type.name}}
                    options={types.map(value => {
                      return {
                        ...value,
                        value: value.id,
                        label: value.name
                      }
                    })}
                    isSearchable={false}
                    onChange={e => setFieldData(SET_COST_FIELD, 'cost', {...cost, type: e})}
                  />
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
      </ModalBody>
      <ModalFooter>
        <Button.Ripple
          color="danger"
          className="btn-uppercase"
          onClick={() => setFieldData(SET_COST_FIELD, 'params', {...params, cost_id: null, isOpenModal: false})}
        >
          Отмена
        </Button.Ripple>
        {params.cost_id ?
          <Button.Ripple
            color="primary"
            className="btn-uppercase"
            onClick={() => Update()}
          >
            Обновить
          </Button.Ripple> :
          <Button.Ripple
            color="primary"
            className="btn-uppercase"
            onClick={() => Store()}
          >
            Добавить
          </Button.Ripple>
        }

      </ModalFooter>
    </Modal>
  )
}

const mapStateToProps = state => ({
  params: state.eventCosts.params,
  reqParams: state.eventCosts.reqParams,
  cost: state.eventCosts.cost,
  types: state.eventCosts.types,
});

export default connect(mapStateToProps, {getCost, setFieldData, updateCost, storeCost, getItem, storeItem, updateItem, getTypes})(TabCosts)
